@import '@/styles/variables.scss';
.status-component{
    .status-ul{
        display: flex;
        justify-content: center;
        align-items: center;
        .status-li{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            .li-main{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                .icon-container{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                    border: 2px solid $main-color;
                    margin-bottom: $block-space-y;
                    .icons{
                        font-size: 40px;
                        color: $main-color;
                    }
                }
                .status-title{
                    .content{
                        font-size: 14px;
                        font-weight: bold;
                        color: $font-color-main;
                    }
                }
            }
            .current{
                .icon-container{
                    border: 2px solid $status-color4;
                    .icons{
                        font-size: 40px;
                        color: $status-color4;
                    }
                }
                .status-title{
                    .content{
                        color: $status-color4;
                    }
                }
            }
            
            .line{
                width: 80px;
                height: 1px;
                border-top: 1px dashed $main-color;
                margin-top: 35px;
            }
        }
    }
}